<template>
  <div class="">
    <div class="bg_colorff p_l30 p_r30 p_t20">
      <div class="font_size28 color_33">{{orderinfo.package_name}}</div>
      <div class="font_size28 color_33 t_right p_t20 p_b20 border_b">￥{{orderinfo.price}}</div>
      <div class="flex">
        <div class="font_size28 color_33 flex-1 line90">购买数量</div>
        <div class="t_right m_b20 m_t20">
          <div class="numbox">
            <span class="numjisuan" @click="jiannumFn()"><img class="jian_icon" src="../../assets/img/icon/jian.png" /></span>
            <input type="number" class="inputnum" v-model="num" placeholder="输入提货数量"/>
            <span class="numjisuan" @click="jianumFn()"><img class="jia_icon" src="../../assets/img/icon/jia.png"/></span>
          </div>
        </div>
      </div>
      <div class="flex p_b30">
        <div class="flex-1 color_33 font_size28">合计</div>
        <div>￥{{allprice}}</div>
      </div>
    </div>

    <div class="font_size28 color_33 bg_coloref p_b20 p_r30 p_l30 p_t30">选择付款方式</div>

    <div class="bg_colorff p_l30 p_r30 p_t20" style="padding-bottom: 40px">
      <div class="font_size28 color_33 p_b30 border_b " @click="checkzhifutypeFn">
        <div>余额支付</div>
        <div class="flex">
          <div>当前余额 <span>￥{{balace}}</span></div>
          <div class="t_right flex-1" v-if="!isgougou"><img class="gougou_icon" src="../../assets/img/icon/gougou.png" /></div>
        </div>
      </div>
      <div class="font_size28 color_33 p_b20 p_t20 border_b flex" @click="checkzhifutypeFn">
        <div>微信支付</div>
        <div class="t_right flex-1" v-if="isgougou"><img class="gougou_icon" src="../../assets/img/icon/gougou.png" /></div>
      </div>

      <div class="zhifu_btn" @click="goPayFn">支付</div>

    </div>

    <section class="layer" v-if="isdel">
      <div class="layerbox">
        <div v-if="ispaysuccess">
          <div class="delinfo t_center">
            <img class="del_img" src="../../assets/img/paysu.png" />
            <div class="font_size32 color_33 m_t20 p_t30">支付成功</div>
          </div>
          <div class="del_btn flex t_center font_size28 color_33">
            <div class="flex-1" @click="delFn(1)">确定</div>
            <div class="flex-1 border_l" @click="delFn(2)">查看商品</div>
          </div>
        </div>

        <div v-if="!ispaysuccess">
          <div class="delinfo t_center">
            <img class="del_img" src="../../assets/img/payfail.png"/>
            <div class="font_size32 color_33 m_t20 p_t30">支付失败</div>
          </div>
          <div class="del_btn flex t_center font_size28 color_33">
            <div class="flex-1" @click="failFn(1)">确定</div>
            <div class="flex-1 border_l" @click="failFn(2)">查看订单</div>
          </div>
        </div>

      </div>
    </section>

  </div>
</template>

<script>
    export default {
        name: "pay",
      data(){
        return {
          orderinfo: '',
          isgougou:false,
          balace: '',
          pay_type: 2,
          allprice: '',
          num: '',
          isdel: false,
          ispaysuccess: true
        }
      },
      watch: {
        num(){
          this.allprice = this.orderinfo.price*this.num
        }
      },
      computed: {
          // allprice(){
          //   return this.orderinfo.allprice?this.orderinfo.price*this.orderinfo.num : this.orderinfo.price
          // }
      },
      created(){
          console.log(this.$route.query.id)
        this.orderinfo = this.$route.query.id
        this.num = this.orderinfo.num
        this.allprice = this.orderinfo.price*this.orderinfo.num
        this.balace = this.$store.state.balace_money
      },
      methods: {
        jiannumFn(){
          if(!this.num){
            this.$toast('请输入提货数量')
            return
          }
          if(this.num < 1){
            return
          }
          this.num --
        },
        jianumFn(){
          if(!this.num){
            this.$toast('请输入提货数量')
            return
          }
          this.num ++
        },
        checkzhifutypeFn(){
          var self = this
          self.isgougou = !self.isgougou
        },
        goPayFn(){
          if(this.isgougou){
            this.pay_type = 1
          } else {
            this.pay_type = 2
          }
          if(this.orderinfo.num<0){
            this.$toast('请输入购买数量')
            return
          }
          this.$util.post('order/postCreateOrder',{
            uid: this.$store.state.userinfo.uid,
            goods_id:this.orderinfo.id,
            goods_num: this.num,
            price: this.allprice,
            pay_type: this.pay_type
          }).then(data => {
            if(data.status == 1){
              console.log(data.data)
              if(data.data.pay_type == 1){
                this.$util.post('order/payOrder', {
                  uid: this.$store.state.userinfo.uid,
                  id: data.data.id
                }).then(data => {
                  console.log(data)
                  if(data.status == 1){
                    WeixinJSBridge.invoke(
                      'getBrandWCPayRequest', {
                        "appId" : data.data.appId,       //公众号名称，由商户传入
                        "timeStamp":data.data.timeStamp, //时间戳，自1970年以来的秒数
                        "nonceStr" : data.data.nonceStr, //随机串
                        "package" : data.data.package,
                        "signType" :data.data.signType,  //微信签名方式：
                        "paySign" : data.data.paySign     //微信签名

                      },
                      function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                          this.$toast.text('支付成功', 'middle');
                          setTimeout(function(){window.location.href='https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2MTU1NTgxMg==&scene=124#wechat_redirect'},3000);
                          this.isdel = true
                        }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                          this.$.toast.text('取消支付', 'middle');
                          this.isdel = true
                          this.ispaysuccess = false
                        }else if(res.err_msg == "get_brand_wcpay_request:fail" ){
                          this.$toast.text('支付失败', 'middle');
                          this.isdel = true
                          this.ispaysuccess = false
                        }
                      }
                    );
                  }

                })

              } else {
                this.isdel = !this.isdel
              }
            } else {
              this.isdel = true
              this.ispaysuccess = false
            }

          })
        },
        delFn(type) {
          var self = this
          self.isdel = !self.isdel
          if(type == 2){
            this.$router.push('/mygoods')
          }
        },
        failFn(type) {
          var self = this
          self.isdel = !self.isdel
          if(type == 2){
            this.$router.push('/order')
          }
        }
      }
    }
</script>

<style scoped>
  .numbox{
    width: 270px;
    height: 60px;
    border: 1px solid #dddddd;
  }
  .numjisuan {
    display: inline-block;
    width: 50px;
    line-height: 60px;
    text-align: center;
  }
  .jian_icon{
    width: 30px;
    height: 3px;
    vertical-align: middle;
  }
  .jia_icon{
    width: 30px;
    height: 30px;
    vertical-align: middle;
  }
  .inputnum{
    width: 140px;
    line-height: 55px;
    padding-left: 10px;
    border-left: 1px  solid #dddddd;
    border-right: 1px  solid #dddddd;
  }
  .gougou_icon{
    height: 27px;
    width: 38px;
  }
  .zhifu_btn{
    width: 100%;
    height: 70px;
    line-height: 70px;
    background-color: #0dd13b;
    color: white;
    border-radius: 30px;
    margin-top: 70px;
    text-align: center;
    font-size: 28px;
  }

  .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    left: 0;
    top: 0;
    z-index: 99;
  }
  .layerbox {
    position: relative;
    background-color: white;
    border-radius: 4px;
    border-bottom: 1px solid #dddddd;
    width: 580px;
    height: 500px;
    top: 50%;
    margin-top: -25%;
    left: 85px;
  }
  .delinfo{
    padding: 70px 0px 50px 0px;
  }
  .del_img{
    width: 180px;
    height: 180px;
  }
  .del_btn{
    height: 90px;
    line-height: 90px;
    border-top: 1px solid #dddddd;
  }
</style>
